<template>
  <div id="home">
    <common-title-bar :always="isAlways"></common-title-bar>
    <transition name="router-fade" mode="out-in">
      <keep-alive v-if="$route.meta.keepAlive">
        <router-view></router-view>
      </keep-alive>
    </transition>
    <transition name="router-fade" mode="out-in">
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </transition>
    <!-- <transition name="mask">
      <div @touchstart.stop.prevent="()=>{}" class="mask" v-if="maskIsShow"></div>
    </transition> -->
  </div>
</template>
<script>
import {getQueryVariable} from '@/utils/utils'
import CommonTitleBar from '@/components/CommonTitleBar'
import { mapState } from "vuex";
export default {
  name: "hhh",
  data() {
    return {};
  },
  components: {
    CommonTitleBar
  },
  created() {
    this.$store.commit('saveRequestParams', {
      unionKey: getQueryVariable('unionKey'),
      token: getQueryVariable('token')
    })
  },
  computed: mapState({
    maskIsShow: state => {
      return state.maskState;
    },
    isAlways: state => {
      return state.isAlways
    }
  }),
  methods: {
    
  }
};
</script>
<style lang="scss">
@import './assets/css/common.css';
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
    moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select:none;
    -khtml-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
.mask{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 999;
}
.router-fade-enter-active {
  transition: opacity 1s;
}

.router-fade-enter, .router-fade-leave-active {
  opacity: 0.8;
}
.mask-enter-active, .mask-leave-active {
  transition: opacity 0.5s;
}
.mask-enter, .mask-leave-to {
  opacity: 0;
}
</style>
